
<script type="text/javascript" src="https://www.google.com/jsapi"></script>

  <h3 id="h4-titulo">Graficos KPIS Inbound</h3>   <br>
 
  <div id="div-grafico">
      
      <div id="div-inbound60" class="div-marco">
          
          <script type="text/javascript">
      google.load("visualization", "1", {packages:["corechart"]});
      google.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Task', ''],
        
         <?php
         
         foreach ($cInbound60 as $item => $value ):
             
             echo "['$item',$value],";
             
         endforeach;
         
         ?>
        ]);

        var options = {
          title: 'Cantidad De Inbound > 60 Dias | Snapshot'
        };

        var chart = new google.visualization.PieChart(document.getElementById('div-inbound60'));
        chart.draw(data, options);
      }
    </script>
          
          
          
      </div>
     
      <div id="div-estatusIbound" class="div-marco">
          
          <script type="text/javascript">
      google.load("visualization", "1", {packages:["corechart"]});
      google.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Task', ''],
          ['Rojo',<?php echo $semafaro["rojo"]; ?>],
          ['Amarrillo',<?php echo $semafaro["amarrillo"]; ?>],
          ['Verde',<?php echo $semafaro["verde"]; ?>]
         
        ]);

        var options = {
          title: 'Estatus De Inbound | Snapshot',
           colors:['red','yellow','green']
        };

        var chart = new google.visualization.PieChart(document.getElementById('div-estatusIbound'));
        chart.draw(data, options);
      }
    </script>
          
          
          
      </div>
      
      <div id="div-barra" class="div-barra">
      
      <script type="text/javascript">
      google.load("visualization", "1", {packages:["corechart"]});
      google.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Usuarios', 'Verde', 'Amarrillo', 'Rojo'],
          <?php 
          
         foreach ($estatusBarra as $indice => $key):
         
             foreach ($usuario as $user):
                 
             if($user->getIdUsuario() == $indice):
               
               $nombre = $user->getNombreUsuario();
               $verde = $key["verde"];
               $amarrillo = $key["amarrillo"]; 
               $rojo = $key["rojo"]; 
             
               if(is_null($rojo)){$rojo = 0;}
               if(is_null($amarrillo)){$amarrillo = 0;}
               if(is_null($verde)){$verde = 0;}

                 echo "['$nombre',$verde,$amarrillo,$rojo],";
                 
             endif;
             
             endforeach;
             
         endforeach;
          
          ?>
         
        ]);

        var options = {
          title: 'Estatus Por Usuarios',
          hAxis: {title: 'Usuarios', titleTextStyle: {color: 'red'}},
         colors:[ 'green','yellow','red',]
        };

        var chart = new google.visualization.ColumnChart(document.getElementById('div-barra'));
        chart.draw(data, options);
      }
    </script>

          </div>
      
      

<style type="text/css">
      
  
body
{
    background-color: #FFFFFF  !important;
}    
   
 
     table
     {
         text-align: center;
         float: right;
         margin-right: 25px;
         
     } 
      
     td
     {
         padding: 5px;
         font-size: 12px;
         
     }
           
      #content
      {
          height: 900px !important;
      }
      .div-marco
      {
          width: 48%;
          height: 330px;
          float: left;
      }
      
      #div-espacio
      {
          width: 100%;
          height: 150px;
      }
      
        #h4-titulo
    {
        display: block;
        text-align: center;
        background-color: #06B014 ;
        color: white;
        font-weight: bold;
        border-radius: 2px 2px 2px 2px;
        padding: 6px 12px;
    }
    
    #div-select
    {
        float: right;
        width: 280px;
        height: 50px;;
    }
    
    input[type='text'], select {
	width:20%;
	border:1px solid #E5E5E5;
	-moz-border-radius:4px;
	border-radius:4px;
	height:20px;
	padding:2px;
	box-shadow:none;
	-moz-box-shadow:none;
	-webkit-box-shadow:none;
	float:left;
}
input[type='text']:focus, select:focus {
	width:20%;
	border:1px solid #4CBAE5;
	-moz-border-radius:4px;
	border-radius:4px;
	height:20px;
	padding:2px;
	background-color:#D1F0FF;
	box-shadow:none;
	-moz-box-shadow:none;
	-webkit-box-shadow:none;
	float:left;
}

    .error:before {
    border-color: transparent #BC1010 transparent transparent;
    border-style: solid;
    border-width: 8px;
    content: "";
    left: -16px;
    position: absolute;
    top: 5px;
}
.error {
    background-color: #BC1010;
    border-radius: 4px 4px 4px 4px;
    color: white;
    font-weight: bold;
    margin-left: 16px;
    margin-top: -5px;
    padding: 6px 12px;
    position: absolute;
}   
    
    form label  {

    background-color: #0066CC ;
    border-radius: 2px 2px 2px 2px;
    color: white;
    font-weight: bold;
    margin-left: 8px;
    margin-top: -3px;
    padding: 6px 12px;    
    float: left;
    display: block;
}

#fecha{
    
    float: left;
    width: 45%;
    height: 45%;
}

#div-formulario
{
    width: 100%;
    height: 100px;
    float: left;
}

#datos
{
     
         font-size: 12px; 
         margin: 0;
         padding: 5px;
         font-family: arial;
}


.div-barra
      {
          width: 100%;
          height: 350px;
          float: left;
      }

    
</style>